<template>
  <div>
    <el-row class="prodRow">
      <el-col class="proditem"  @click="prodItemClick(item)" :span="3" v-for="item,index in holderProdItem" :key="index">
        <p class="proditemP" :class='{selProduct:item.selProduct}'>
          <el-image class="img"   :src="getImageUrl(item.isHode?item.hodeProductImg:item.nohodeProductImg)" fit="fill" />
          <span>{{item.productName}}</span>
        </p>
      </el-col>
    </el-row>
    <el-table :data="tableData" v-loading="showLoading" border v-if="tableIsShow">
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column :show-overflow-tooltip="true" :fixed="item.fixed" align="center" :prop="item.prop"
          :label="item.label" :width="item.width" fit >
          <template v-slot="scope">
            <span>{{ getItemStr(scope.row,item) }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination background layout="total, sizes, prev, pager, next, jumper, ->" :total="dataTotalSize"
				:page-size="pageInfo.pageSize" :current-page="pageInfo.pageNum" @current-change="pageChange"
				@size-change="pageSizeChange" style="margin-top:10px; text-align:center" ref="pageInfo1" v-if="tableIsShow" />
  </div>
</template>
<script setup lang="ts"> 
  import { signProductDataItems } from "./signProductDataItems.js"
  const holderProdItem = ref(signProductDataItems)
  const tableIsShow = ref(false)
  const tableData = ref([{cardNo:'1231231',acctNo:'213123',openDt:'2019-20-12',openBranName:'开户机构'}])
  const columns = ref([])
  const selItem = ref({})
  const showLoading = ref(false)
  const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    startIndex: 0
  })

  const dataTotalSize = ref(0)
  const pageChange = (pageNum) => { 
    pageInfo.value.pageNum = pageNum;
  }
  const pageSizeChange = (pageSize) => { 
    pageInfo.value.pageSize = pageSize;
    // this.getHodeTableData(this.selItem);
  }
  // pageChange(pageNum) {
  //   if (pageNum != 0) {
  //     this.pageInfo.startIndex = (pageNum - 1) * parseInt(this.pageInfo.pageSize);
  //   } else {
  //     this.pageInfo.startIndex = 0;
  //   }
  //   this.pageInfo.pageNum = pageNum;
  //   this.getHodeTableData(this.selItem);
  // }
  // pageSizeChange(pageSize) {
  //   this.pageInfo.pageSize = pageSize;
  //   this.getHodeTableData(this.selItem);
  // }
  
  const getImageUrl = (url) => {
      return new URL(url,import.meta.url).href
  }
  const prodItemClick = (item) => {
    tableIsShow.value= false;
    let selProduct = item.selProduct
    // tableData.value = []
    holderProdItem.value.forEach(element => {
      element.selProduct = false
    });
    item.selProduct = !selProduct //true
    columns.value = item.productColumns;
    selItem.value = item;
    if (!item.selProduct) {
      tableIsShow.value = false;
      return;
    }
    tableIsShow.value= true;
  }
  const getItemStr = (rowItem, columItem) => {
    if (columItem.iscompute) {
      return rowItem[columItem.prop] ? (rowItem[columItem.prop] * 100).toFixed(2) + '%' : ''
    }
    if (columItem.unitCode) {
      if (rowItem[columItem.prop]) {
        return rowItem[columItem.prop] + columItem.unitCode
      } else {
        return ''
      }
    } else {
      return rowItem[columItem.prop]
    }
  }
</script>

<style lang="scss" scoped>
  .img{
    width: 40px;
    height: 40px;
  }
  .prodRow{
    width: 100%;
    .proditem{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px;
      cursor: pointer;
    }
    .proditemP{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 80px;
      padding: 10px;
      cursor: pointer;
      span{
        font-size: 14px;
        margin-top: 3px;
      }
    }
  }
  .selProduct {
		box-shadow: 0px 4px 20px 2px rgba(122, 122, 122, .75);
		border-radius: 5px;
    padding: 5px;
		// background-color: #447eea;
	}
</style>